<template id="content_item">
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-6">
            <textarea class="form-control" rows="4" v-model="content" placeholder="{:__('Content')}:" name="content[]" data-rule="required;" ></textarea>
        </div>
        <div class="col-xs-12 col-sm-2">
            <button type="button" @click="delContentByComponent(index)" class="btn btn-success btn-embossed">{:__('Delete')}</button>
        </div>
    </div>
</template>
<template id="solve_note_item">
    <div class="form-group">
        <label for="solve_note_id" class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-2">
            <select  v-model="type" name="solve_note_type[]" class="form-control" data-rule="required;">
                <option value="">请选择签类型</option>
                <option :value="type.id" v-for="type in type_list">{{type.name}}</option>
            </select>
        </div>
        <label class="control-label col-xs-12 col-sm-1" :for="'content_'+index"></label>
        <div class="col-xs-12 col-sm-4">
            <textarea class="form-control" :id="'content_'+index" rows="4" v-model="content" placeholder="{:__('Solve note content')}:" name="solve_content[]"></textarea>
        </div>
        <div class="col-xs-12 col-sm-2">
            <button type="button" @click="delSolveNoteByComponent(index)" class="btn btn-success btn-embossed">{:__('Delete')}</button>
        </div>
    </div>
</template>
<form id="form" class="form-horizontal form-ajax" role="form" data-toggle="validator" method="POST" action="">
    <input type="hidden" name="row[temple_id]" value="{$temple_id}">
    <div class="form-group">
        <label for="name" class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input type="text" class="form-control" id="name" name="row[name]" value="" data-rule="required;name" />
        </div>
    </div>

    <div class="form-group">
        <label for="desc" class="control-label col-xs-12 col-sm-2">{:__('Desc')}:</label>
        <div class="col-xs-12 col-sm-8">
            <textarea class="form-control"  id="desc" name="row[desc]" data-rule="required;desc" ></textarea>
        </div>
    </div>
    <div id="component_div">

    <div class="form-group" id="option_div">
        <label for="title" class="control-label col-xs-12 col-sm-2">{:__('Content')}:</label>
        <div class="col-xs-12 col-sm-8">
            <button type="button" @click="addContentItem('content_item_component')" class="btn btn-success btn-embossed">{:__('Add content')}</button>
        </div>

    </div>

    <div :is="item.component" @on-content-change="onContentChange"  :index="item.index" :content="item.content" v-for="item in content_list"></div>
    <div class="form-group" id="solve_note_div">
        <label for="title" class="control-label col-xs-12 col-sm-2">{:__('Solve note')}:</label>
        <div class="col-xs-12 col-sm-8">
            <button type="button" @click="addSolveNoteItem('content_item_component')" class="btn btn-success btn-embossed">{:__('Add Solve note')}</button>
        </div>

    </div>
    <div :is="item.component" @on-solve-content-change="onSolveNoteContentChange"  @on-type-change="onTypeChange" :type_list="item.type_list" :type="item.type" :index="item.index" :content="item.content" v-for="item in solve_note_list"></div>
    </div>
    <div class="form-group hidden layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>